<template>
  <div class="p-3">
    <el-row :gutter="12" :style="{ minHeight: minHeight }">
      <el-col :xs="24" :span="17">
        <div class="contBox p-3">
          <div class="top-Tag mb-5">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
              <el-tab-pane label="店铺信息" name="first">
                <div class="baseInfo mb-5" style="font-size: 20px">
                  企业基本信息
                </div>
                <div class="delInfo">
                  <div class="item mb-6">
                    <div class="tip">店铺头像</div>
                    <img class="userAvato" :src="userStore.shop.logo" alt="" />
                    <el-button class="editInfo" link>编辑店铺信息</el-button>
                  </div>
                  <div class="item mb-6">
                    <div class="tip">店铺名称</div>
                    <div class="test">{{ userStore.shop.name }}</div>
                    <div class="tip ml-35">联系电话</div>
                    <div class="test">{{ userStore.shop.mobile }}</div>
                  </div>
                  <div class="item mb-6">
                    <div class="tip">所在地区</div>
                    <div class="test">{{ userStore.shop.storeAddrPath }}</div>
                  </div>
                  <div class="item mb-6">
                    <div class="tip">详细地址</div>
                    <div style="font-size: 14px; font-weight: 500;">{{ userStore.shop.storeAddrDetail }}</div>
                  </div>
                  <div class="item mb-6" style="align-items: flex-start">
                    <div class="tip">店铺简介</div>
                    <el-input readonly v-model="userStore.shop.storeDetail" style="width: 642px" :rows="4"
                      type="textarea" />
                  </div>
                  <div class="item mb-6" style="align-items: flex-start">
                    <div class="tip">相关证件</div>
                    <div class="imgBox">
                      <el-image style="width: 90px; height: 90px" v-for="(item, index) in userStore.shop.cardInfos"
                        :key="index" :src="item" class="mr-2" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                        :preview-src-list="userStore.shop.cardInfos" :initial-index="index" fit="cover" />
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="企业信息" name="second">
                <div class="baseInfo mb-5" style="font-size: 20px">
                  公司信息
                  <div class="editInfoBtn">
                    提交修改申请
                    <el-button class="editInfolink" link>
                      编辑店铺信息
                    </el-button>
                  </div>
                </div>
                <div class="delInfo">
                  <div class="item mb-6">
                    <div class="tip">公司名称</div>
                    <div class="test">城之内的真红眼黑龙公司</div>
                  </div>
                  <div class="item mb-6">
                    <div class="tip">信用代码</div>
                    <div class="test">598MAD2CIY558</div>
                  </div>
                  <div class="item mb-6">
                    <div class="tip">主体类型</div>
                    <div class="test">个体工商户</div>
                  </div>
                  <div class="item mb-6">
                    <div class="tip">经营地址</div>
                    <div style="font-size: 14px; font-weight: 500;">
                      江西省 赣州市 章贡区 沙河大道沙河工业园区55号4栋1203室
                    </div>
                  </div>
                  <div class="item mb-6" style="align-items: flex-start">
                    <div class="tip">营业执照</div>
                    <div class="imgBox">
                      <el-image style="width: 90px; height: 90px" v-for="(item, index) in imgList" :key="index"
                        :src="item" class="mr-2" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                        :preview-src-list="imgList" :initial-index="index" fit="cover" />
                    </div>
                  </div>
                  <div class="baseInfo mb-5" style="font-size: 20px">
                    法人信息
                    <el-button class="editInfo" link @click="isEdit = !isEdit">
                      {{ isEdit ? "返回" : "查看详情" }}
                    </el-button>
                  </div>
                  <div class="rzBox" v-if="!isEdit">
                    <div class="rzIcon">
                      <svg-icon icon-class="fruser" size="40px" />
                      <div class="svg-tip">实名认证</div>
                      <el-icon class="icon" color="#006ce5" size="24px">
                        <CircleCheckFilled />
                      </el-icon>
                    </div>
                    <div class="rzIcon">
                      <svg-icon icon-class="frplone" size="40px" />
                      <div class="svg-tip">绑定手机号</div>
                      <el-icon class="icon" color="#006ce5" size="24px">
                        <CircleCheckFilled />
                      </el-icon>
                    </div>
                  </div>
                  <div v-else>
                    <div class="item mb-6">
                      <div class="tip">法人证件类型</div>
                      <div class="test">身份证</div>
                    </div>
                    <div class="item mb-6" style="align-items: flex-start">
                      <div class="tip">法人身份证正面</div>
                      <div class="imgBox">
                        <el-image style="width: 90px; height: 90px" v-for="(item, index) in imgList" :key="index"
                          :src="item" class="mr-2" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                          :preview-src-list="imgList" :initial-index="index" fit="cover" />
                      </div>
                    </div>
                    <div class="item mb-6" style="align-items: flex-start">
                      <div class="tip">法人身份证反面</div>
                      <div class="imgBox">
                        <el-image style="width: 90px; height: 90px" v-for="(item, index) in imgList" :key="index"
                          :src="item" class="mr-2" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2"
                          :preview-src-list="imgList" :initial-index="index" fit="cover" />
                      </div>
                    </div>
                    <div class="item mb-6">
                      <div class="tip">法人姓名</div>
                      <div class="test">张三</div>
                    </div>
                    <div class="item mb-6">
                      <div class="tip">法人身份证号</div>
                      <div class="test">360222********4219</div>
                    </div>
                    <div class="item mb-6">
                      <div class="tip">绑定手机号</div>
                      <div class="test">185****8888</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
              <el-tab-pane label="管理账号" name="third">
                <div class="admin p-3">
                  <div class="h3 mb-6">管理员</div>
                  <div class="user-item p-2">
                    <div class="lt">
                      <img class="img mr-2" src="@/assets/images/tx.png" alt="" />
                      <div class="cnt">
                        <div class="t">天选（hxh****0888）</div>
                        <div class="s"></div>
                      </div>
                    </div>
                    <el-button class="rt" link>更换</el-button>
                  </div>
                </div>
                <div class="admin p-3 mt-8 pb-0">
                  <div class="tipTop">
                    <div class="h3">项目成员</div>
                    <div class="btns">
                      <el-button class="lBtn">编辑</el-button>
                      <el-button class="rBtn">添加</el-button>
                    </div>
                  </div>
                  <el-row :gutter="15" class="p-2">
                    <el-col v-for="item in [0, 1, 2, 3, 4, 5, 6, 7]" :key="item" :xs="24" :span="12" class="mb-3">
                      <div class="user-item p-2 wit">
                        <div class="lt">
                          <img class="img mr-2" src="@/assets/images/tx.png" alt="" />
                          <div class="cnt">
                            <div class="t">天选（hxh****0888）</div>
                            <div class="s"></div>
                          </div>
                        </div>
                        <el-button class="bz" link>编辑备注</el-button>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :span="7">
        <div class="Right-Box">
          <div class="user p-4 mb-3">
            <div class="user-top">
              <div class="u-t-l">HI,{{ userStore.shop.name }}</div>
              <el-button class="u-t-r" link>
                <svg-icon icon-class="shop" size="14px" class="mr-1" />
                店铺信息
              </el-button>
            </div>
            <div class="user-count mt-5">
              <img class="avato" :src="userStore.shop.logo" />
              <div class="u-c-r">
                <div class="item">
                  <div class="l">店铺名称：</div>
                  <div class="r">{{ userStore.shop.name }}</div>
                </div>
                <div class="item">
                  <div class="l">店铺状态：</div>
                  <div class="r">营业中</div>
                </div>
              </div>
            </div>
            <div class="user-bzj mt-6">
              <div class="u-b-l mr-3 flex">
                店铺保证金
                <div class="ml-1 pt-1">
                  <svg-icon icon-class="king" size="25px" />
                </div>
              </div>
              <div class="u-b-r">已缴纳</div>
            </div>
            <div class="user-amout mt-4">10000.00</div>
          </div>
          <div class="mark p-4">
            <div class="top">
              <div class="lt">店铺评分</div>
              <el-button class="rt" link>
                查看详情
                <el-icon class="mb-0.2">
                  <component is="ArrowRightBold" />
                </el-icon>
              </el-button>
            </div>
            <div class="box mt-2">
              <div class="tp">
                {{ shopCount.score }}
                <el-rate class="ml-1" v-model="value" disabled :colors="['#dbdbdb', '#dbdbdb', '#5e80fa']"
                  disabled-void-color="#dbdbdb" />
              </div>
              <div class="lineBox mt-8">
                <div class="item mb-3">
                  <div class="l">
                    5
                    <svg-icon icon-class="Star" size="18px" />
                  </div>
                  <div class="r ml-4">
                    <el-progress style="width: 140px" :stroke-width="10"
                      :percentage="shopCount.fiveStarRatio / shopCount.commentNum * 100" color="#6283fb"
                      :show-text="false" />
                  </div>
                </div>
                <div class="item mb-3">
                  <div class="l">
                    4
                    <svg-icon icon-class="Star" size="18px" />
                  </div>
                  <div class="r ml-4">
                    <el-progress style="width: 140px" :stroke-width="10"
                      :percentage="shopCount.fourStarRatio / shopCount.commentNum * 100" color="#6283fb"
                      :show-text="false" />
                  </div>
                </div>
                <div class="item mb-3">
                  <div class="l">
                    3
                    <svg-icon icon-class="Star" size="18px" />
                  </div>
                  <div class="r ml-4">
                    <el-progress style="width: 140px" :stroke-width="10"
                      :percentage="shopCount.threeStarRatio / shopCount.commentNum * 100" color="#6283fb"
                      :show-text="false" />
                  </div>
                </div>
                <div class="item mb-3">
                  <div class="l">
                    2
                    <svg-icon icon-class="Star" size="18px" />
                  </div>
                  <div class="r ml-4">
                    <el-progress style="width: 140px" :stroke-width="10"
                      :percentage="shopCount.twoStarRatio / shopCount.commentNum * 100" color="#6283fb"
                      :show-text="false" />
                  </div>
                </div>
                <div class="item mb-3">
                  <div class="l">
                    1
                    <svg-icon icon-class="Star" size="18px" />
                  </div>
                  <div class="r ml-4">
                    <el-progress style="width: 140px" :stroke-width="10"
                      :percentage="shopCount.oneStarRatio / shopCount.commentNum * 100" color="#6283fb"
                      :show-text="false" />
                  </div>
                </div>
              </div>
              <div class="count">共计{{ shopCount.commentNum }}条评论</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "ShopInfo",
  inheritAttrs: false,
});
import { useSettingsStore } from "@/store";
import type { TabsPaneContext } from "element-plus";
import variables from "@/styles/variables.module.scss";
import { useUserStore } from "@/store";
import ShopAPI, { type CountInfo } from "@/api/shop";
onActivated(async () => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被重新插入时
  const res = await ShopAPI.getCount()
  shopCount.value = res

})
const shopCount = ref<CountInfo>({})
const userStore = useUserStore()
const minHeight = computed(() => {
  if (useSettingsStore().tagsView) {
    return `calc(100vh - 24px - ${variables["navbar-height"]} - ${variables["tags-view-height"]})`;
  } else {
    return `calc(100vh - 24px - ${variables["navbar-height"]})`;
  }
});
const value = ref(4.6);
const isEdit = ref(false);
const imgList = ref([
  "",
  "",
]);
const activeName = ref("first");
const handleClick = (tab: TabsPaneContext, event: Event) => {
};
</script>

<style lang="scss" scoped>
.rzBox {
  padding-left: 140px;
  display: flex;
  align-items: center;
  height: 200px;
}

.rzIcon {
  width: 120px;
  height: 120px;
  border: 1px solid #f2f6fb;
  background-color: #fafbfd;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 40px;
  position: relative;

  .svg-tip {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #3d3d3d;
    font-weight: 500;
    white-space: nowrap;
  }

  .icon {
    position: absolute;
    right: 0;
    bottom: 10px;
  }
}

.baseInfo {
  display: flex;
  align-items: center;
}

:deep .top-Tag .demo-tabs .el-tabs__item {
  align-items: flex-start;
  height: auto;
  padding-bottom: 5px;
  font-size: 18px;
  color: #333333;
}

:deep .top-Tag .demo-tabs .is-active {
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
  color: #1f75ec;
}

:deep .top-Tag .demo-tabs .el-tabs__active-bar {
  background-color: #1f75ec;
  width: 56px !important;
  height: 4px;
}

:deep .top-Tag .demo-tabs .el-tabs__nav-wrap::after {
  content: none;
}

.contBox {
  height: 100%;
  background-color: #fff;

  .delInfo {
    .item {
      display: flex;
      align-items: center;
      padding-left: 20px;

      .tip {
        font-size: 14px;
        font-weight: 500;
        width: 140px;
      }

      .userAvato {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        border: 2px solid #1f75ec;
      }

      .test {
        font-size: 16px;
        font-weight: 500;
      }
    }
  }

  .editInfo {
    font-weight: 500;
    font-size: 14px;
    margin-left: 500px;
    color: #1f75ec;
  }

  .editInfoBtn {
    cursor: pointer;
    margin-left: 500px;
    width: 90px;
    background-color: #2578ec;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 27px;
    position: relative;

    border-radius: 5px;

    .editInfolink {
      position: absolute;
      left: 0;
      top: 50px;
      font-weight: 500;
      font-size: 14px;
      color: #1f75ec;
    }
  }

  .admin {
    width: 100%;
    min-height: 157px;
    background-color: #fafbfd;

    .tipTop {
      display: flex;
      justify-content: space-between;

      .btns {
        display: flex;
        font-size: 16px;

        .lBtn {
          width: 92px;
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #d3d9dd;
          color: #333333;
        }

        .rBtn {
          margin-left: 20px;
          width: 92px;
          height: 36px;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: #2075ec;
          color: #fff;
        }
      }
    }

    .h3 {
      font-size: 18px;
      font-weight: 600;
    }

    .user-item {
      width: 359px;
      background-color: #f2f6fb;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .lt {
        display: flex;

        .img {
          width: 44px;
          height: 44px;
          border-radius: 4px;
          background-color: skyblue;
        }

        .cnt {
          height: 44px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .t {
            font-size: 14px;
            font-weight: 500;
          }

          .s {
            font-size: 10px;
            color: #6c6c6c;
            font-weight: 500;
          }
        }
      }

      .rt {
        font-size: 14px;
        font-weight: 500;
        color: #1f75ec;
      }

      .bz {
        font-size: 14px;
        font-weight: 500;
        color: #3d3d3d;
      }
    }

    .wit {
      width: 100%;
    }
  }
}

.Right-Box {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.mark {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  flex: 1;

  .top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .lt {
      font-weight: 700;
      font-size: 24px;
    }

    .rt {
      width: 102px;
      height: 32px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 35px;
      background-color: #f1f5fa;
      font-size: 14px;
      color: #333;
    }
  }

  .box {
    padding: 15px 30px 30px 30px;
    background-image: linear-gradient(to bottom, #f6fcff, #fafbfd);
    border-radius: 6px;

    .tp {
      font-size: 48px;
      font-weight: 700;
      display: flex;
      align-items: center;
      color: #4671f6;
      font-family: D-DIN;

      :deep .el-rate__icon {
        font-size: 44px;
        font-weight: normal;
      }
    }

    .lineBox {
      .item {
        display: flex;
        align-items: center;

        .l {
          font-size: 18px;
        }
      }
    }

    .count {
      color: #6c6c6c;
      font-size: 14px;
    }
  }
}

.operating-data {
  background-color: #fff;
  border-radius: 8px;

  .data-top {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .d-t-l {
      font-size: 22px;
    }

    .d-t-r {
      width: 102px;
      height: 32px;
      border-radius: 35px;
      background-color: #f2f6fb;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333333;
    }
  }

  .data-Item {
    width: 100%;
    height: 244px;
    border-radius: 8px;
    border: 2px solid #daedff;

    .it-top {
      display: flex;

      .img {
        width: 40px;
        height: 40px;
      }

      .rt {
        height: 40px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .t {
          font-size: 18px;
        }

        .x {
          font-size: 10px;
          color: #6c6c6c;
        }
      }
    }

    .it-mony {
      display: flex;
      align-items: flex-end;

      .k {
        font-size: 16px;
        font-weight: 700;
      }

      .num {
        font-size: 40px;
        font-weight: 700;
        line-height: 40px;
        margin: 0 5px;
      }

      .total {
        font-size: 26px;
        font-weight: 700;
        line-height: 26px;
        margin: 0 5px;
      }

      .qus {
        font-size: 12px;
        font-weight: 500;
        color: #ff4c4c;
        display: flex;
        align-items: center;
      }

      .green {
        color: #12b475;
      }
    }

    .btit {
      font-size: 12px;
      color: #6c6c6c;
    }
  }
}

.left {
  .tp {
    width: 100%;
    background-color: #7d95fc;
    border-radius: 8px;
    padding: 20px;
    padding-bottom: 0;

    .title {
      display: flex;

      justify-content: space-between;
      align-items: center;
      padding-right: 30px;

      .l {
        display: flex;
        align-items: center;

        .dian {
          width: 8px;
          height: 8px;
          background-color: #fff;
          margin-right: 15px;
        }

        .text {
          font-size: 22px;
          color: #fff;
        }
      }

      .rBtn {
        width: 86px;
        height: 28px;
        border-radius: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #1f75ec;
        font-size: 12px;
        background-color: #daedff;
      }
    }

    .card {
      display: flex;
      flex-direction: column;
      color: #ffffff;
      align-items: center;

      .t {
        padding-left: 5px;
        font-size: 14px;
      }

      .c {
        font-size: 40px;
        font-weight: 700;
      }

      .x {
        padding-left: 5px;
        font-size: 12px;
      }
    }
  }

  .bt {
    width: 100%;
    border-radius: 8px;
    background-color: #fff;

    .tit {
      font-size: 22px;
    }

    .list {
      width: 100%;
      overflow-x: auto;
      overflow-y: hidden;
      white-space: nowrap;

      .item {
        width: 380px;
        height: 72px;
        margin-right: 20px;
        border-radius: 8px;
        border: 2px solid #daedff;
        position: relative;
        display: inline-flex;
        flex-direction: column;
        justify-content: space-between;

        .state {
          position: absolute;
          top: 0;
          right: 0;
          width: 60px;
          height: 20px;
          border-radius: 0 8px 0 8px;
          font-size: 14px;

          display: flex;
          justify-content: center;
          align-items: center;
        }

        .titp {
          font-size: 14px;
        }

        .msgBt {
          display: flex;
          justify-content: space-between;

          .id {
            font-size: 12px;
            color: #6c6c6c;
          }

          .time {
            font-size: 12px;
            color: #6c6c6c;
          }
        }
      }

      .item:last-child {
        margin-right: 0;
      }

      .blue {
        border-color: #daedff;

        .state {
          background-color: #8fbaf5;
          color: #1f75ec;
        }

        .titp {
          .tt {
            color: #1f75ec;
          }
        }
      }

      .red {
        border-color: #ffc0c066;

        .state {
          background-color: #ffb7b7;
          color: #ff4c4c;
        }

        .titp {
          .tt {
            color: #ff4c4c;
          }
        }
      }
    }

    // .list::-webkit-scrollbar-thumb:hover {
    //   background-color: red;
    // }

    // .list::-webkit-scrollbar {
    //   height: 4px;
    // }
  }
}

.user {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
  height: 341px;

  .user-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;

    .u-t-l {
      font-family: Alimama ShuHeiTi;
      font-size: 24px;
      font-weight: 700;
    }

    .u-t-r {
      width: 102px;
      height: 32px;
      border-radius: 35px;
      background-color: #f1f5fa;
      font-size: 14px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #333;
    }
  }

  .user-count {
    display: flex;

    .avato {
      width: 72px;
      height: 72px;
      border-radius: 50%;
      border: 2px solid #1f75ec;
      margin-right: 20px;
    }

    .u-c-r {
      height: 72px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .item {
        display: flex;
        align-items: center;
        font-size: 16px;

        .l {
          margin-right: 14px;
          color: #3a3a3a;
        }

        .r {
          color: #383838;
        }
      }
    }
  }

  .user-bzj {
    display: flex;
    align-items: center;

    .u-b-l {
      font-size: 16px;
      align-items: center;
    }

    .u-b-r {
      width: 74px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 35px;
      font-size: 14px;
      background-color: #f2f6fb;
    }
  }

  .user-amout {
    font-size: 40px;
    color: #333;
    font-weight: 700;
  }
}
</style>
